<template>
	<view class="container">
		<view class="address-list">
			<view class="address-item" v-for="(item, index) in addressList" :key="index" @tap="selectAddress(item)">
				<view class="info">
					<view class="user-info">
						<text class="name">{{item.name}}</text>
						<text class="phone">{{item.phone}}</text>
						<text class="tag" v-if="item.isDefault">默认</text>
					</view>
					<text class="address">{{item.address}}</text>
				</view>
				<view class="actions">
					<view class="action-btn" @tap.stop="editAddress(item)">
						<uni-icons type="compose" size="20"></uni-icons>
						<text>编辑</text>
					</view>
					<view class="action-btn" @tap.stop="deleteAddress(item)">
						<uni-icons type="trash" size="20"></uni-icons>
						<text>删除</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="add-btn" @tap="addAddress">
			新增收货地址
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			addressList: []
		}
	},
	onShow() {
		this.loadAddressList()
	},
	methods: {
		loadAddressList() {
			// TODO: 调用后端API获取地址列表
			this.addressList = [
				{
					id: 1,
					name: '张三',
					phone: '13800138000',
					address: '浙江省杭州市西湖区文教路123号',
					isDefault: true
				},
				{
					id: 2,
					name: '李四',
					phone: '13900139000',
					address: '浙江省杭州市滨江区网商路599号',
					isDefault: false
				}
			]
		},
		selectAddress(item) {
			const pages = getCurrentPages()
			const prevPage = pages[pages.length - 2]
			if (prevPage) {
				prevPage.$vm.setAddress(item)
				uni.navigateBack()
			}
		},
		addAddress() {
			uni.navigateTo({
				url: '/pages/my/address-edit'
			})
		},
		editAddress(item) {
			uni.navigateTo({
				url: '/pages/my/address-edit?id=' + item.id
			})
		},
		deleteAddress(item) {
			uni.showModal({
				title: '提示',
				content: '确定要删除该地址吗？',
				success: (res) => {
					if (res.confirm) {
						// TODO: 调用后端API删除地址
						this.addressList = this.addressList.filter(address => address.id !== item.id)
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: $background-color;
	padding-bottom: 120rpx;
}

.address-list {
	padding: 20rpx;
	
	.address-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.info {
			border-bottom: 1rpx solid $border-color;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			
			.user-info {
				margin-bottom: 16rpx;
				
				.name {
					font-size: 32rpx;
					color: $text-color;
					margin-right: 20rpx;
					font-weight: bold;
				}
				
				.phone {
					font-size: 28rpx;
					color: $text-color;
				}
				
				.tag {
					font-size: 24rpx;
					color: #ff8f1f;
					background-color: rgba(#ff8f1f, 0.1);
					padding: 4rpx 12rpx;
					border-radius: 4rpx;
					margin-left: 20rpx;
				}
			}
			
			.address {
				font-size: 28rpx;
				color: $text-color;
				line-height: 1.5;
			}
		}
		
		.actions {
			display: flex;
			justify-content: flex-end;
			
			.action-btn {
				display: flex;
				align-items: center;
				margin-left: 40rpx;
				
				text {
					font-size: 28rpx;
					color: $text-color-grey;
					margin-left: 8rpx;
				}
			}
		}
	}
}

.add-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #2979ff;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: bold;
}
</style> 